<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12练习2_懒加载</title>
    <script src="../rest.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #352323;
            background-size: 400px 200px;
        }

        #list {
            list-style: none;
            width: 96%;
            padding: 0 2%;
            column-count: 3;
        }

        #list li {
            border: 2px solid pink;
            padding: 10px;
            margin-bottom: 10px;
            break-inside: avoid;
            /*防止断裂*/
        }

        #list li img {
            width: 100%;
        }

        #list li p {
            text-align: center;
            color: deeppink;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <ul id="list">
        <!-- <li>
            <img src="img/1.jpg" alt="">
            <p>往后余生，风雪是你</p>
        </li> -->
    </ul>
</body>
<script>
    var data1 = [
        { url: "https://img.zcool.cn/community/031nvs5rqwq3jdqow374oly3330.png", name: "黑鸭探长卡通IP形象" },
        { url: "http://www.infinistudio.cn/Public//Upload/2018-06-15/5b23a47775e22.jpg", name: "乌云插画集-18" },
        { url: "https://static.maizuo.com/pc/v5/usr/movie/1ce4633160a172867c415b85e4a1cab3.jpg", name: "卷不下去 我就去送外卖" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d5408e4c8849.jpg", name: "小欧的白日梦" },
        { url: "https://img.zcool.cn/community/0319wfltdillutdmbtiuj7f3935.png", name: "iconfont品牌升级" },
        { url: "https://pic.maizuo.com/usr/movie/a08125f88e07cbd6aae0a651434611af.jpg", name: "小米 12S Ultra | 色彩" },
        { url: "https://pic.maizuo.com/usr/movie/cc6af4c0b8ffbc64da4b7996517a1208.jpg", name: "淘菜菜商业大插" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg", name: "【探索】立体-质感-毛玻璃" },
        { url: "https://pic.maizuo.com/usr/movie/2dff84a9ce76d52bb70e26d6a746786b.jpg", name: "小狐狸胖次 17 骚气回归" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54075c153a2.jpg", name: "超级动物小队" },
        { url: "https://img.zcool.cn/community/031tnt8enqmeyt8ai61ui0w3139.png", name: "黑鸭探长卡通IP形象" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-01-16/5c3ec88634813.jpg", name: "乌云插画集-18" }];

    var data2 = [
        { url: "https://img.zcool.cn/community/031nvs5rqwq3jdqow374oly3330.png", name: "黑鸭探长卡通IP形象" },
        { url: "http://www.infinistudio.cn/Public//Upload/2018-06-15/5b23a47775e22.jpg", name: "乌云插画集-18" },
        { url: "https://static.maizuo.com/pc/v5/usr/movie/1ce4633160a172867c415b85e4a1cab3.jpg", name: "卷不下去 我就去送外卖" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d5408e4c8849.jpg", name: "小欧的白日梦" },
        { url: "https://img.zcool.cn/community/0319wfltdillutdmbtiuj7f3935.png", name: "iconfont品牌升级" },
        { url: "https://pic.maizuo.com/usr/movie/a08125f88e07cbd6aae0a651434611af.jpg", name: "小米 12S Ultra | 色彩" },
        { url: "https://pic.maizuo.com/usr/movie/cc6af4c0b8ffbc64da4b7996517a1208.jpg", name: "淘菜菜商业大插" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg", name: "【探索】立体-质感-毛玻璃" },
        { url: "https://pic.maizuo.com/usr/movie/2dff84a9ce76d52bb70e26d6a746786b.jpg", name: "小狐狸胖次 17 骚气回归" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54075c153a2.jpg", name: "超级动物小队" },
        { url: "https://img.zcool.cn/community/031tnt8enqmeyt8ai61ui0w3139.png", name: "黑鸭探长卡通IP形象" },
        { url: "http://www.infinistudio.cn/Public//Upload/2019-01-16/5c3ec88634813.jpg", name: "乌云插画集-18" }];


    /*-----------------------------------------------------------------------------*/
    var oList = document.getElementById("list")
    addContent(data1)

    var flag = false
    window.onscroll = function () {
        if (flag) return
        if (monitor(500)) {
            flag = true
            console.log(123)
            setTimeout(function () {
                addContent(data2)
                flag = false
            }, 1000)
        }
    }



    function addContent(arr) {
        oList.innerHTML += arr.reduce(function (total, item) {
            total += `
                    <li>
                        <img src="${item.url}" alt="">
                        <p>${item.name}</p>
                    </li>
                `
            return total;
        }, ``);
    }

</script>

</html>